<template>
  <div class="aboutUs">
    <breadCrunmb
      imgUrl="assets/project/head.jpg"
      :pathNames="pathNames"
    ></breadCrunmb>

    <div class="aboutUs-content">
      <treeMenu
        class="products-tree"
        :expandAll="true"
        :treeData="treeData"
        :defaultHeightLight="1"
        title="产品分类"
        @clickNode="clickTree"
        nodeKey="id"
        :needDefaultExpandedKeys="true"
        :defaultProps="treeSet">
      </treeMenu>

      <div class="about-company" v-if="nowNode === 1">
        <div class="title">
          <div class="big">公司简介</div>
          <div class="small">Company Profile</div>
          <div class="company-name">——重庆渝兴交通设施有限公司</div>
        </div>

        <div class="company-detail">
          <p v-for="item in companyDetails" :key="item">{{item}}。</p>
        </div>

        <div class="title">
          <div class="big">公司证书</div>
          <div class="small">Company certificate</div>
        </div>

        <img :src="imgUrlHead + companyInfo.company_certificate" />
      </div>

      <div class="company-culture" v-if="nowNode === 2">
        <div class="title">
          <div class="big">公司文化</div>
          <div class="small">Company culture</div>
        </div>

        <div class="culture-content">
          <p v-for="item in companyCultrues" :key="item">{{item}}。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import breadCrunmb from '@/components/breadCrunmb'
import treeMenu from '@/components/TreeMenu'
import { getCompanyInfo } from '@/request/api'
export default {
  name: 'aboutUs',
  components: {
    breadCrunmb,
    treeMenu,
    getCompanyInfo
  },
  data () {
    return {
      imgUrlHead: 'http://backmanage.yuxjt.com/',
      pathNames: [
        {
          id: 1,
          pathUrl: '/index',
          pathName: '网站首页'
        },
        {
          id: 2,
          pathName: '关于我们'
        }
      ],
      treeSet: {
        id: 'id',
        label: 'label',
        children: 'children'
      },
      treeData: [
        {
          id: 1,
          label: '公司简介'
        },
        {
          id: 2,
          label: '公司文化'
        }
      ],
      companyInfo: {},
      companyDetails: [],
      companyCultrues: [],
      nowNode: 1
    }
  },
  created () {
    getCompanyInfo().then(res => {
      this.companyInfo = res
      this.companyDetails = res.column_14.split('。')
      this.companyCultrues = res.column_15.split('。')
    })
  },
  methods: {
    clickTree (data) {
      this.nowNode = data.id
    }
  }
}
</script>

<style lang="scss">
  .aboutUs {
    margin-bottom: 20px;
    .aboutUs-content{
      margin-top: 15px;
      display: grid;
      grid-template-columns: 300px 954px;
      grid-gap: 10px;
      justify-content: center;
      align-content: center;
    }

    .about-company {
      .title {
        text-align: center;
        font-size: 34px;
        .small {
          font-size: 14px;
          color: #8c939d;
        }
        .company-name {
          font-size: 24px;
          margin-top: 10px;
          line-height: 60px;
          margin-left: 250px;
          color: #1482f0;
        }
      }
      .company-detail {
        line-height: 20px;
        color: #424242;
        margin: 0 15px;
        margin-bottom: 90px;
      }

      img {
        width: 70%;
        margin-bottom: 50px;
      }
    }

    .company-culture {
      .title {
        text-align: center;
        font-size: 34px;
        .small {
          font-size: 14px;
          color: #8c939d;
        }
        .company-name {
          font-size: 24px;
          margin-top: 10px;
          line-height: 60px;
          margin-left: 250px;
          color: #1482f0;
        }
      }

      .culture-content {
        line-height: 20px;
        color: #424242;
        margin: 0 15px;
        margin-bottom: 90px;
      }
    }
  }

</style>
